<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width: 400px;
        border-bottom: 1px solid tomato;
        margin: 200px auto;
        position: relative;
    }
    #inp2{
        width: 370px;
        height: 30px;
        font-size: 24px;
        padding-left: 5px;
        outline: none;
        border: none;
    }
    .box img{
        position: absolute;
        width: 30px;
        right: 10px;
    }
</style>
<body>
<button id="btn1">点击</button>
<input type="text" value="666" id="inp1">
<div class="box">
    <label for="">
        <img src="../images/闭眼.png">
    </label>
    <input type="password" id="inp2">
</div>
<script>
    var btn = document.getElementById('btn1');
    var inp = document.getElementById('inp1');
    btn.onclick = function () {
        inp.value = '点击了';
        btn.disabled = true;
    };
    var img = document.querySelector('img');
    var inp2 = document.getElementById('inp2');
    var flag = 0;
    img.onclick = function () {
        if (flag == 0) {
            inp2.type = 'text';
            img.src = "../images/睁眼.png";
            flag = 1;
        } else {
            inp2.type = 'password';
            img.src = "../images/闭眼.png";
            flag = 0;
        }
    }
</script>
</body>
</html>